import Head from 'next/head';
import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
import ColumnOptionsTable from '../../../components/prop-tables/ColumnOptionsTable';
import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable';
import Example from '../../../examples/disable-column-hiding';

<Head>
  <title>{'Column Hiding Guide - Material React Table V3 Docs'}</title>
  <meta
    name="description"
    content="How to use, customize, or disable column hiding and visibility features of Material React Table"
  />
</Head>

## Column Hiding Feature Guide

The column hiding feature is enabled by default and allows the user to hide data columns from either the column actions menu or the show/hide columns menu.

### Relevant Table Options

<TableOptionsTable
  onlyOptions={new Set(['enableHiding', 'onColumnVisibilityChange'])}
/>

### Relevant Column Options

<ColumnOptionsTable
  onlyOptions={new Set(['enableHiding', 'visibleInShowHideMenu'])}
/>

### Relevant State

<StateOptionsTable onlyOptions={new Set(['columnVisibility'])} />

### Hide Some Columns by Default

You can easily hide columns by default by setting the `columnVisibility` `state` or `initialState` to hide the desired columns by id.

```jsx
const table = useMaterialReactTable({
  columns,
  data,
  initialState: { columnVisibility: { firstName: false } }, //hide firstName column by default
});

return <MaterialReactTable table={table} />;
```

### Dynamically Hide Columns

If you need to control how the columns are hidden dynamically, you can use `state` instead of `initialState` along with the `onColumnVisibilityChange` table option. Or alternatively you can use the `setColumnVisibility` table instance api.

```jsx
const [columnVisibility, setColumnVisibility] = useState({
  firstName: false,
});

useEffect(() => {
  setColumnVisibility({ firstName: true }); //programmatically show firstName column
}, [someDependency]);

const table = useMaterialReactTable({
  columns,
  data,
  state: { columnVisibility }, //manage columnVisibility state
  onColumnVisibilityChange: setColumnVisibility,
});

//NOTE: Instead of managing the columnVisibility state yourself, we could call a table instance api
table.setColumnVisibility({ firstName: true }); //programmatically show firstName column
```

### Disable Column Hiding

If you do not want this feature to be enabled at all, you can disable it by setting the `enableHiding` table option to `false`.

```jsx
const table = useMaterialReactTable({
  columns,
  data,
  enableHiding: false,
});
```

Alternatively, you can disable hiding specific columns by setting the `enableHiding` column option to `false` per column.

If you want to hide certain columns by default, you can specify column visibility in the `initialState.columnVisibility` table option.

<Example />

### Enable Column Hiding on Display Columns

By default, column hiding is only enabled on data columns. Display columns, such as `mrt-row-numbers`, `mrt-row-select`, etc., do not have column hiding enabled, and their toggle will be disabled. You can turn that back on by setting the `enableHiding` option to `true` in the `displayColumnsOptions` table option.

```jsx
const table = useMaterialReactTable({
  columns,
  data,
  displayColumnDefOptions: {
    'mrt-row-numbers': {
      enableHiding: true, //now row numbers are hidable too
    },
  },
});
```

See the [Display Columns Feature Guide](/docs/guides/display-columns#display-column-definition-options-prop) for a more in depth explanation of the `displayColumnsOptions` table option.

### Hide Column From Show Hide Menu

> New in v2.3.0

By default, all columns are visible in the column show hide menu that is opened from the columns button in the toolbar internal actions button. You can hide a column from this menu by setting the `visibleInShowHideMenu` column option to `false`.

```jsx
const columns = [
  {
    accessorKey: 'uuid',
    header: 'UUID',
    visibleInShowHideMenu: false, //hide this column from the show hide menu, but still show the column in the table
  },
];

const table = useMaterialReactTable({
  columns,
  data,
  displayColumnDefOptions: {
    'mrt-row-actions': {
      visibleInShowHideMenu: false, //hide the built-in row actions column from the show hide menu
    },
  },
});
```

### Custom Columns Menu

The `MRT_ShowHideColumnsMenu` component is one of the few MRT components that is pretty opinionated and not easily customizable. Instead of trying to customize the menu with overrides, it might be easier for you to just build your own new button and menu from scratch using the Table and Column Instance APIs.

Adding your own Toolbar Buttons is covered in the [Toolbar Guide](/docs/guides/toolbar-customization#customize-built-in-internal-toolbar-button-area)

If all you want to do is customize the buttons above the columns menu, you can import and use the `MRT_ShowHideColumnsMenuItems` component from material react table, which is a component that renders the columns in the list with the toggle switches, but then render your own buttons in the top or bottom of the menu itself.

View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-column-hiding-examples)**
